<template>
	<view class="common-page-box">
		<view class="top-box">
			<view class="edit" @click="gotoInfo" v-if="JSON.stringify(user_info) !== '{}' && user_info.name !==''">编辑
			</view>
			<view class="top-image">
				<image class="image" :src="weixin_info.avatar"></image>
			</view>
			<view class="top-right">
				<view class="name">{{weixin_info.nickName}}</view>
				<button class="addInfo" @click="gotoInfo"
					v-if="JSON.stringify(user_info) === '{}' || user_info.name ===''">+ 添加收货信息</button>
				<view class="descContainer" v-else>
					<view class="desc">{{user_info.name}}----{{user_info.phone}}</view>
					<view class="desc" >收货地址{{user_info.address}}</view>
				</view> 

			</view>
		</view>
		<view class="nav-list-box">
			<view class="list-item" v-for="(item, index) in navList" :key="index" @click="toPage(item)">
				<view class="image-box">
					<image class="image" :src="item.img"></image>
				</view>
				<view>
					{{ item.name }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'

	export default {
		computed: {
			...mapState('buji_search', ['user_info']),
		},
		data() {
			return {
				backUrl: '/pages/my/my',
				weixin_info: {
					avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fc35f8d98-a574-4257-83b4-1b731f5d66b8%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1682819365&t=8dddf5e06f60a266abd1217b2124a3db',
					nickName: 'Linalol'
				},
				navList: [{
						name: "我的订单",
						img: "../../static/logo.png",
						value: "myOrder/myOrder"
					},
					{
						name: "已发布商品",
						img: "../../static/logo.png",
						value: "myIssue/myIssue"
					},
					{
						name: "平台反馈",
						img: "../../static/logo.png",
						value: "feedback"
					}
				]
			}
		},
		onLoad() {},
		methods: {
			...mapMutations('buji_search', ['updateRedirectInfo']),

			gotoInfo() {
				this.updateRedirectInfo(this.backUrl)
				uni.navigateTo({
					url: "/subpkg/info/info",
				})
			},
			toPage(item) {
				uni.navigateTo({
					url: "/subpkg/" + item.value
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.common-page-box {
		padding: 30rpx;
		box-sizing: border-box;
		min-height: 100vh;
		background-color: #fff;
	}

	.top-box {
		position: relative;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		border-bottom: 1px solid #ccc;

		.edit {
			padding: 15rpx;
			background-color: #F57E53;
			color: #fff;
			border-radius: 6rpx;
			position: absolute;
			right: 20rpx;
			top: 0rpx;
			font-size: 24rpx;
		}

		.top-image {
			margin-right: 30rpx;

			.image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 100%;
				display: block;
			}
		}

		.top-right {
			
			.addInfo {
				background-color: #efefef;
				margin-bottom: 30rpx;
				height: 50rpx;
				line-height: 50rpx;
				width: 350rpx;
			}

			.name {
				font-weight: bold;
				font-size: 28rpx;
				color: #333;
				margin-bottom: 20rpx;
			}

			.desc {
				margin-bottom: 20rpx;
				font-size: 26rpx;
				color: #666;
			}
		}
	}

	.nav-list-box {
		margin-top: 20rpx;
	}

	.list-item {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding: 30rpx 0;
		box-sizing: border-box;
		border-bottom: 1px dashed #ccc;

		.image-box {
			margin-right: 30rpx;

			.image {
				width: 50rpx;
				height: 50rpx;
				border-radius: 100%;
				display: block;
			}
		}
	}
</style>
